package com.weboosttools.assist.view

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.HorizontalAlignmentLine
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.ui.tooling.preview.Preview


//TODO: 以后通过颜色等， 把主要要听写的内容展示出来， 目前暂时不需要这么详细

@Composable
fun SupervisedMemoryCard() {

    // score of the card
    var score by remember { mutableStateOf(-1.0) }

    Card(
        modifier = Modifier.padding(8.dp)
    ) {
        Column(
            // 边距
            modifier = Modifier.padding(8.dp),
            // 子项居中
            horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally,
        ) {
            // 上方的右上角是提示任务类型的， 根据发音拼写
            Row(
                modifier = Modifier.fillMaxWidth(),
                // 子项靠右对齐
                horizontalArrangement = Arrangement.End
            ) {
                Text("根据类型拼写", style = MaterialTheme.typography.subtitle2, color = Color.Gray)
            }
            Text(
                "Hello",
                // 使用Display.small字体大小
                style = MaterialTheme.typography.h4,
                modifier = Modifier.padding(16.dp)
            )
            // 音标
            Row(
                // 子项垂直居中对齐
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text("英音: /həˈloʊ/", style = MaterialTheme.typography.subtitle2)
                Spacer(modifier = Modifier.padding(3.dp))
                IconButton(
                    // 大小和普通文字一样
                    modifier = Modifier.size(20.dp),
                    // 内边距为0
                    onClick = {
                        // 发出声音
                    }) {
                    Icon(
                        imageVector = Icons.Default.Phone,
                        contentDescription = "Sound",
                    )
                }
                Spacer(modifier = Modifier.padding(16.dp))
                Text("美音: /həˈloʊ/", style = MaterialTheme.typography.subtitle2)
                Spacer(modifier = Modifier.padding(3.dp))
                IconButton(
                    // 大小和普通文字一样
                    modifier = Modifier.size(20.dp),
                    onClick = {
                        // 发出声音
                    }) {
                    Icon(
                        imageVector = Icons.Default.Phone,
                        contentDescription = "Sound",
                    )
                }
            }

            Row {
                // clear score
                IconButton(onClick = { score = -1.0 }) {
                    Icon(
                        imageVector = Icons.Default.Clear,
                        contentDescription = "Clear",
                    )
                }
                Spacer(modifier = Modifier.padding(16.dp))
                // 横向分割线


                // bad icon
                IconToggleButton(
                    checked = score == 0.0,
                    onCheckedChange = { score = 0.0 }
                ) {
                    Icon(
                        imageVector = Icons.Default.Face,
                        contentDescription = "Bad",
                        tint = if (score == 0.0) Color.Red else Color.Unspecified
                    )
                }
                // better than bad
                IconToggleButton(
                    checked = score == 0.3,
                    onCheckedChange = { score = 0.3 }
                ) {
                    Icon(
                        imageVector = Icons.Default.Check,
                        contentDescription = "not bad",
                        tint = if (score == 0.3) Color.Yellow else Color.Unspecified
                    )
                }
                // good but not enough
                IconToggleButton(
                    checked = score == 0.6,
                    onCheckedChange = { score = 0.6 }
                ) {
                    Icon(
                        imageVector = Icons.Default.Done,
                        contentDescription = "fair",
                        tint = if (score == 0.6) Color.Green else Color.Unspecified
                    )
                }
                // wonderful
                IconToggleButton(
                    checked = score == 1.0,
                    onCheckedChange = { score = 1.0 }
                ) {
                    Icon(
                        imageVector = Icons.Default.ThumbUp,
                        contentDescription = "Good",
                        tint = if (score == 1.0) Color.Green else Color.Unspecified
                    )
                }
            }
        }
    }
}

@Preview
@Composable
fun previewCard() {
    Column(modifier = Modifier.background(Color.DarkGray)) {
        SupervisedMemoryCard()
    }
}